
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html; charset=utf-8" %>
<%@page import="controller.Controller"%>
<%@page import="sessionMenegment.SessionMgr"%>
<%@ page import="java.util.*,dataBase.*"%>
<%@page import="language.LangFactory"%>
<%@page import="language.LangIntrf"%>
<%@ page import="com.google.appengine.api.users.UserService"%>
<%@ page import="com.google.appengine.api.users.UserServiceFactory"%>

<%
	SessionMgr sessionMgr = SessionMgr.getInst();
	//boolean user = sessionMgr.checkUser(request,session);
	boolean user = sessionMgr.checkClient(request,session);
	System.out.println("user :"+user);
	System.out.println("session "+session.getAttribute("SyncaString"));
	System.out.println(session.getAttribute("userNameBusiness"));
	String a = (String)session.getAttribute("userNameBusiness");
	System.out.println(sessionMgr.getRandomUser(a));
%>
<%
	LangFactory langFactory= new LangFactory();
	String langName = request.getParameter("lang");
	LangIntrf lang =null;
	if(langName!=null){
		lang = langFactory.getLang(request.getParameter("lang"));
		session.setAttribute("lang",langName);
	}
	else
		lang = langFactory.getLang((String)session.getAttribute("lang"));
	String langSign = lang.getLang();
	
	
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Synca</title>
<link rel="icon" href="images/synca.png" type="image/x-icon"/> 
<link rel="shortcut icon" href="images/synca.png" type="image/x-icon"/>
<link href="try6.css" rel="stylesheet" type="text/css" />
<link href="http://dl.dropbox.com/u/22035932/jPicker-1.1.6.min.css" type="text/css"  rel="stylesheet" />
<link href="http://dl.dropbox.com/u/22035932/jPicker.css" type="text/css" rel="stylesheet" />
<!--[if IE]>

<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColHybLtHdr #sidebar1 { padding-top: 30px; }
.twoColHybLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
</style>
<![endif]-->


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.tools.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="javascript/jquery.address-1.4.min.js"></script>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/interface.js"></script>
<script type="text/javascript" src="javascript/jquery.validate.js"></script>
<script src="javascript/jpicker-1.1.6.min.js" type="text/javascript"></script>
<script>

			jQuery(document).ready(
				function() {
					$.fn.jPicker.defaults.images.clientPath='images/';
					$("#myform2").submit(function() {
						 if(username)
							addItemsToForm();
						else
							return false; 
					}); 
					$("#myform3").submit(function(){
						 if(username==false){
							 alert("sd");
							return false; 
						 }
					});
					jQuery(function($) { $('#myAccordion').Accordion({
						headerSelector	: 'dt',
						panelSelector	: 'dd',
						activeClass		: 'myAccordionActive',
						hoverClass		: 'myAccordionHover',
						panelHeight		: 280,
						speed			: 300
						}); 
						$('#myAccordion').Accordion
					});
					$.address.history(false).strict(false).change(function(event){																	
						var tab = event.value;					
						/*(tab=='biz') ? changeSignIn('business') : changeSignIn('customer');*/
						(tab=='joinbiz') ? visiableMain('joinbiz') : hiddenMain('joinbiz');
						(tab=='home' || tab=='' || tab=='biz' || tab=='custom') ? visiableMain('home') : hiddenMain('home');
						(tab=='join') ? visiableMain('join') : hiddenMain('join');
						(tab=='contactUs') ? visiableMain('contactUs') : hiddenMain('contactUs');
						(tab=='about') ? visiableMain('about') : hiddenMain('about');
						(tab=='forget') ? visiableMain('forget') : hiddenMain('forget');
   					}).history(true);
					
					$("#nextButton").click(function(){
						
						$(this).parent().find("#firstForm").css("visibility","hidden").css("position","fixed");
						$(this).parent().find("#secondForm").css("visibility","").css("position","");
						$(this).parent().find("p").html("stage 2 of 2");
						$(this).parent().find("#prevButton").css("opacity" ,"1");
						$(this).parent().find("#nextButton").css("opacity" ,"0.7");
					});
					$("#prevButton").click(function(){
					
						$(this).parent().find("#firstForm").css("visibility","").css("position","");
						$(this).parent().find("#secondForm").css("visibility","hidden").css("position","fixed");
						$(this).parent().find("p").html("stage 1 of 2");
						$(this).parent().find("#nextButton").css("opacity" ,"1");
						$(this).parent().find("#prevButton").css("opacity" ,"0.7");
					
					});
					$("#statusAddButton").click(function(){
						addItem('status',$(this));
					});
					$("#statusRemoveButton").click(function(){	
						removeItem('status',$(this));
					});
					$("#messageAddButton").click(function(){
						addItem('message',$(this));
					});
					$("#messageRemoveButton").click(function(){	
						removeItem('message',$(this));
					});
					$("#myform2 input[title]").tooltip({
										 
						// place tooltip on the right edge
						position: "center right",
					
						// a little tweaking of the position
						offset: [-2, 10],
					
						// use the built-in fadeIn/fadeOut effect
						effect: "fade",
					
						// custom opacity setting
						opacity: 0.7
					
					});
					$("#myform3").validate({ 
										   rules: { 
										   		userName: "required",
												password: {
													required: true,
													minlength: 5
												},
												password1:{
													required: true,
													minlength: 5,
													equalTo: "#password"
												}
										   },
										   messages: { 
										   		userName: "Please enter a username",
												password: {
													required: "Please enter a password",
													minlength: jQuery.format("Enter at least {0} characters")
												},
												password1:{
													required: "Please enter the password again to confirm",
													minlength: jQuery.format("Enter at least {0} characters"),
													equalTo: "Enter the same password as above"
												}
										   },
										   errorPlacement: function(error, element) { 
										   		error.appendTo(element.parent().parent().next().find('.status'));
												element.attr('class','error');
										   },
										   success: function(label){
											   label.html("");
										   }
					});
					$("#sortable1").sortable();
					order = $("#sortable1").sortable('serialize',{attribute:'name'});
					$("#sortable1").disableSelection();
					$("#sortable2").sortable();
					order = $("#sortable2").sortable('serialize',{attribute:'name'});
					$("#sortable2").disableSelection();
					$('#pickColor1').jPicker({
				          window:{
				            expandable: true,
				            position:	{x: 'screenCenter', y: '-450'},
							liveUpdate: true},
			 		   	color:
			           				{alphaSupport: true,
			             			 	active: new $.jPicker.Color({ ahex: 'f5f5f5' })
			           				}
				          
					});
					$('#pickColor2').jPicker({
				          window:{
				            expandable: true,
				            position:	{x: 'screenCenter', y: '-450'},
							liveUpdate: true},
			 		   	color:
			           				{alphaSupport: true,
			             			 	active: new $.jPicker.Color({ ahex: '6699cc' })
			           				}
				          
					});
					$('#pickColor3').jPicker({
				          window:{
				            expandable: true,
				            position:	{x: 'screenCenter', y: '-450'},
							liveUpdate: true},
			 		   	color:
			           				{alphaSupport: true,
			             			 	active: new $.jPicker.Color({ ahex: '3366cc' })
			           				}
				          
					});
					var background = ['f5f5f5','ffaaaa','bfffaa','ffffff'];
					var messageBG = ['6699cc','ff5656', 'aced21', '8d967b'];
					var border = ['3366cc','ff0000', '0b8205', '000000'];
					
					 $("#pageColorSelect").change(function(){
							var pos = $(this).val();
							$.jPicker.List[0].color.active.val('hex', background[pos], this);
							$.jPicker.List[1].color.active.val('hex', messageBG[pos], this);
							$.jPicker.List[2].color.active.val('hex', border[pos], this);

							
						});
					 
					 $("#bizTypeSelect").change(function(){
						 
						 var pos = $(this).val();	
						 $('#sortable1 li').remove();
						 $.post("typesBusiness",{bizType:types[pos]},function(data) {
	 						$('#sortable1').html(data);
						 },"html"); 
						 $.get("typesBusiness",{bizType:types[pos]},function(data) {
	 						$('#sortable2').html(data);
						 },"html"); 
					 });
					 $("#preview").click(function(){
					 	window.open('preview.jsp?background='+$.jPicker.List[0].color.active.val("hex")+'&messageBG='+$.jPicker.List[1].color.active.val('hex')+'&border='+$.jPicker.List[2].color.active.val('hex'));
					 });
					 $('#clientUserName').keyup(function () {
				            // cache the 'this' instance as we need access to it within a setTimeout, where 'this' is set to 'window'
				            var t = this; 
				            var validateUsername = $(this).parent().parent().next().find('.status');
				            // only run the check if the username has actually changed - also means we skip meta keys
				            if (this.value != this.lastValue) {
				                
				                // the timeout logic means the ajax doesn't fire with *every* key press, i.e. if the user holds down
				                // a particular key, it will only fire when the release the key.
				                                
				                if (this.timer) clearTimeout(this.timer);
				                
				                // show our holding text in the validation message space
				                validateUsername.html(' <img src="images/loading.gif" width="16"/>checking availability...');
				                this.timer = setTimeout(function () {
				                	$.get("checkUserName", {username: t.value, type: "client"}, function(data) { if(data=="This username is taken") {
				                																					username=false;
				                																					
				                																				}
				                																				else{
				                																					username=true;
				                																				}
				                																				validateUsername.html(data); },
				            	    "html");
				                }, 1000);
				                
				                // copy the latest value to avoid sending requests when we don't need to
				                this.lastValue = this.value;
				            }
				        });
					 
					 $('#businessName').keyup(function () {
				            // cache the 'this' instance as we need access to it within a setTimeout, where 'this' is set to 'window'
				            var t = this; 
				            var validateUsername = $(this).parent().parent().next().find('.status');
				            // only run the check if the username has actually changed - also means we skip meta keys
				            if (this.value != this.lastValue) {
				                
				                // the timeout logic means the ajax doesn't fire with *every* key press, i.e. if the user holds down
				                // a particular key, it will only fire when the release the key.
				                                
				                if (this.timer) clearTimeout(this.timer);
				                
				                // show our holding text in the validation message space
				                validateUsername.html(' <img src="images/loading.gif" width="16"/>checking availability...');
				                this.timer = setTimeout(function () {
				                	$.get("checkUserName", {username: t.value, type: "bizName"}, function(data) { if(data=="This username is taken") {
																														username=false;
																														
																													}
																													else{
																														username=true;
																													}
				                																				validateUsername.html(data); },
				            	    "html");
				                }, 1000);
				                
				                // copy the latest value to avoid sending requests when we don't need to
				                this.lastValue = this.value;
				            }
				        });
					 $("#logOut").click(function(){
							$.post("logOutClient",function(){$(location).attr('href','home.jsp');});
					});
					 $("#profile").click(function(){
							$.post("myProfileBusiness",function(){$(location).attr('href','myProfileBusiness2.jsp');});
					    });
					 
					 $('#bizUserName').keyup(function () {
				            // cache the 'this' instance as we need access to it within a setTimeout, where 'this' is set to 'window'
				            var t = this; 
				            var validateUsername = $(this).parent().parent().next().find('.status');
				            // only run the check if the username has actually changed - also means we skip meta keys
				            if (this.value != this.lastValue) {
				                
				                // the timeout logic means the ajax doesn't fire with *every* key press, i.e. if the user holds down
				                // a particular key, it will only fire when the release the key.
				                                
				                if (this.timer) clearTimeout(this.timer);
				                
				                // show our holding text in the validation message space
				                validateUsername.html(' <img src="images/loading.gif" width="16"/>checking availability...');
				                this.timer = setTimeout(function () {
				                	$.get("checkUserName", {username: t.value, type: "biz"}, function(data) { if(data=="This username is taken") {
																													username=false;
																													
																												}
																												else{
																													username=true;
																												}
				                																				validateUsername.html(data); },
				            	    "html");
				                }, 5000);
				                
				                // copy the latest value to avoid sending requests when we don't need to
				                this.lastValue = this.value;
				            }
				        });
					 $("#searchButton").click(function(){
						 $.get("getFindOrderForm",function(data){$("body").append(data)});
					 });
					 $("#closeBox").live("click",function(){
						 $(this).parent().hide();
					 });	 
				}
				
			);
			var username = true;
			var visiableMain = function(tab){
				$('#mainContent #'+tab).attr('class','');
				$('#menu #'+tab).attr('class','choosenButton');
				//window.scrollTo(0, 0);
			}
			
			var hiddenMain = function(tab){
				$("#mainContent #"+tab).attr('class','hiddenMain');
				$('#menu #'+tab).attr('class','');
				//window.scrollTo(0, 0);
			}
			var changeSignIn = function(tab){
				$("#signIn #type").attr("value",tab);
				(tab=="business") ? $("#signIn h2").html("Business Sign In") : $("#signIn h2").html("Client Sign In");
				(tab=="business") ? $("#signIn h4:last").html("Customer? Sign in here") : $("#signIn h4:last").html("Business? Sign in here");
				(tab=="business") ? $("#signIn a:last").attr("href","#custom") : $("#signIn a:last").attr("href","#biz");
			}
			var changeForget = function(tab){
				
				$("#forget #type").attr("value",tab);
				var other = (tab=="Customer")? "Business" : "Customer";
				var link = (tab=="Customer") ? "Business? Click Here": "Customer? Click Here";
				$("#forget p:last").html(tab);
				$("#forget a:last").attr("onclick","changeForget('"+other+"'); return false;");				
				$("#forget a:last").html(link);
				
			}
			var addItemOld = function(name,elem){
				if(elem.parent().find("#"+name).val()=="") return false;
				var num  = $('#'+name+'List').find('li').size();
				var newNum  = new Number(num + 1);
				var val = elem.parent().find("#"+name).val();
				elem.parent().find("#"+name+"List").append('<li id="'+name+'Item'+newNum+'"><input type="hidden" value="'+val+'" name="'+name+'Item'+newNum+'"/>'+val+'</li>');
				elem.parent().find("#"+name).val("").focus();
			}
			
			var removeItemOld = function(name,elem){
				var num  = $('#'+name+'List').find('li').size();
				elem.parent().find('#'+name+'Item'+num).remove();
				elem.parent().find('#'+name).val("").focus();
			}
			var getSortOrder = function(){
				var x='';
				$.each($("#sortable").sortable('toArray'), function(index,value){
						x=x+'index '+index+': '+value+'\n';
					});
				return x;
			 }
			var addItemsToForm = function(){
				$.each($("#sortable1").sortable('toArray'), function(index,value){
					addHiddenInput('#myform2','list_'+index,value);
					});
				$.each($("#sortable2").sortable('toArray'), function(index,value){
					addHiddenInput('#myform2','message_'+index,value);
				});
				addHiddenInput('#myform2','background','#'+$.jPicker.List[0].color.active.val("hex"));
				addHiddenInput('#myform2','secBackground','#'+$.jPicker.List[1].color.active.val("hex"));
				addHiddenInput('#myform2','borderColor','#'+$.jPicker.List[2].color.active.val("hex"));
				
		
			 } 
			 var addHiddenInput = function(formName,attName,attVal){
				 $('<input />').attr('type', 'hidden')
		            .attr('name', attName)
		            .attr('value', attVal)
		            .appendTo(formName);
			 }
			 var removeItem = function(x){
				 $(x).remove();
				 
			 }
			 var addItem = function(identifier,sortable){
				 if($("#"+identifier).val()!=''){
				 	$("#"+sortable).append('<li id="list_'+$("#"+identifier).val().replace(/ /g,'_')+'">'+$("#"+identifier).val()+'   <a href="" onclick="removeItem(list_'+$("#"+identifier).val().replace(/ /g,'_')+'); return false;">     remove</a></li>');
				 	$("#"+identifier).val('');
				 }
			 } 
			 var types = ['Restaurant','Delivery'];
		</script>

</head>

<body class="twoColHybLtHdr">

<div id="container">
  <div id="header">
		<div id="logo2">
        	<img src="images\logo.png" alt="" height="80px"/>
        </div>    		
        <div class="menu_nav">
                <ul id="menu">
                    <a href="#home"><li id="home"><%=lang.getHOME_BUTTON() %></li></a>
                    <a href="#join"><li id="join"><%=lang.getJOIN_BUTTON() %></li></a>
                    <a href="#contactUs"><li id="contactUs"><%=lang.getCONTACT_BUTTON() %></li></a>
                    <a href="#about"><li id="about"><%=lang.getABOUT_BUTTON() %></li></a>
                    <a href="redirectClientBiz"><li id="terminal"><%=lang.getTERMINAL_BUTTON() %></li></a>
                </ul>
                
            </div>
            <%
            if(user){ 
            	String userName = (String)session.getAttribute("userNameBusiness");
            	if(userName!=null){
            	%>
            		<label><%=session.getAttribute("userNameBusiness") %></label>
            	<%}else{%>
            		<label><%=session.getAttribute("userNameClient") %></label>
            	<%} %>
            	
            <div class="menu_nav2">
            
                <ul id="menu">
<!-- 				<li id="profile">My Profile</li> --> 
                	<%if(session.getAttribute("googleUser").equals("yes")){
                	UserService userService = UserServiceFactory.getUserService();                
                %>               
                	<li><a style="display: block;" href="<%=userService.createLogoutURL(Controller.getInstance().getSyncaWebAddress()+"/logOutClient")%>"><%=lang.getLOG_OUT_BUTTON()%></a></li>
                <%}else{ %>
                	<li id="logOut"><%=lang.getLOG_OUT_BUTTON()%></li>
                <%} %>              
                </ul>
                
            </div>
            <%} %>
</div>
  <div id="sidebar1">
    <div class="accordionDiv">
     <%if(!user){ %>
    	<dl id="myAccordion">          
            <dt class="someClass" style="text-align: <%=lang.getAlign()%>"><%=lang.getSIGNIN_LABEL() %></dt>
            <dd id="signIn"><br/>
                <form id="signIn" action="logIn" method="post" accept-charset="ISO-8859-1">
                    <%-- <label> User Name:</label>
                    <input type="text" name="username" />
                    <label> Password:</label>
                    <input type="password" name="password" />
                    <input id="type" name="type" type="hidden" value="customer"/>
                    <h5><%String s = (String)session.getAttribute("error");
                    	  if(s!=null){
                    		  session.setAttribute("error",null);
                    		  out.println(s);
                    	  }  
                    	   %></h5>
                    <input type="checkbox" name="remember" class="check">Remember Me</input> 
                    <center><button type="submit">Log In</button></center> --%>
                    <input id="type" name="type" type="hidden" value="customer"/>
                	<table width="80%" dir="<%=lang.getDirection()%>">
                        <tr><td align="<%=lang.getAlign()%>"><%=lang.getUSERNAME_LABEL() %></td></tr>
                		<tr><td align="<%=lang.getAlign()%>"><input type="text" name="username" dir="ltr"/></td></tr>
                		<tr><td align="<%=lang.getAlign()%>"><%=lang.getPASSWORD_LABEL() %></td></tr>
                		<tr><td align="<%=lang.getAlign()%>"><input type="password" name="password" dir="ltr"/></td></tr>
                		<tr><td align="<%=lang.getAlign()%>"><%String s = (String)session.getAttribute("error");
                    	  if(s!=null){
                    		  session.setAttribute("error",null);
                    		  out.println(s);
                    	  }  
                    	   %></td></tr>
                    	   <%
                    	   if(lang.getAlign().equals("left")){
                    	   %>
                			<tr><td align="left"><input type="checkbox" name="remember" class="check"><%=lang.getREMEMBER_ME_LABEL() %></input> </td></tr>
                			<tr><td align="right"><button type="submit"><%=lang.getLOG_IN_BUTTON() %></button></td></tr>
                			<%}else{ %>
                			<tr><td align="right"><input type="checkbox" name="remember" class="check"></input><%=lang.getREMEMBER_ME_LABEL() %> </td></tr>
                			<tr><td align="left"><button type="submit"><%=lang.getLOG_IN_BUTTON() %></button></td></tr>
                			<%} %>
							
                	</table>
                    
                    <a href="#forget"><h4><%=lang.getFORGOT_PASSWORD_LABEL() %></h4></a>
                 
                </form>
                <a href="gmailLogin"><img src="images/loginGoogle-<%=lang.getLang()%>.png"/></a>
            </dd>

            <!--  
            <dt class="someClass" style="text-align: <%=lang.getAlign()%>"><%=lang.getFIND_ORDER_LABEL() %></dt>
            <dd><br/>
                <form id="FindOrder" action="showOneOrder.jsp" method="get" target="_blank" accept-charset="ISO-8859-1">
                    <%-- <label> Company Name:</label>
                    <select name="bizName" >
                    <%Controller controller = Controller.getInstance();
                      ArrayList<String> bizNameList = controller.allBizNameArray();
                      ArrayList<String> bizUserList = controller.allBizUserNameArray();
                      if(bizNameList==null || bizUserList==null){
                    	  System.out.println("error!!!!!!!!!!");
                    	  System.out.println(bizNameList);
                    	  System.out.println(bizUserList);

                      }
                      for(int i=0;i<bizNameList.size();i++){
                    %>
                        <option value="<%=bizUserList.get(i)%>"><%=bizNameList.get(i)%></option>
                    <%} %>
                    </select><br />
                    <label> Order Number:</label>
                    <input type="text" name="orderNum" /><br/>
                    <label> Phone Number:</label>
                    <input type="text" name="phone" />
                    <h5>
                    </h5>
                    
                    <center><button type="submit">Find</button></center> --%>
                    <table dir="<%= lang.getDirection()%>">
                		<tr><td align="<%=lang.getAlign()%>"><%=lang.getCOMPANY_NAME_LABEL() %></td></tr>
                		<tr><td align="<%=lang.getAlign()%>"><select name="bizName" >
                    <%Controller controller = Controller.getInstance();
                      ArrayList<String> bizNameList = controller.allBizNameArray();
                      ArrayList<String> bizUserList = controller.allBizUserNameArray();
                      if(bizNameList==null || bizUserList==null){
                    	  System.out.println("error!!!!!!!!!!");
                    	  System.out.println(bizNameList);
                    	  System.out.println(bizUserList);

                      }
                      for(int i=0;i<bizNameList.size();i++){
                    %>
                        <option value="<%=bizUserList.get(i)%>"><%=bizNameList.get(i)%></option>
                    <%} %>
                    </select></td></tr>
                    <tr><td align="<%=lang.getAlign()%>"><%=lang.getORDER_NUBER_LABEL() %></td></tr>
                    <tr><td align="<%=lang.getAlign()%>"><input type="text" name="orderNum" /></td></tr>
                    <tr><td align="<%=lang.getAlign()%>"><%=lang.getPHONE_NUMBER_LABEL() %></td></tr>
                    <tr><td align="<%=lang.getAlign()%>"><input type="text" name="phone" /></td></tr>
                    <%if(lang.getAlign().equals("left")){ %>
                    	<tr><td align="right"><button type="submit"><%=lang.getFIND_BUTTON() %></button></td></tr>
                    <%}else{ %>
                    	<tr><td align="left"><button type="submit"><%=lang.getFIND_BUTTON() %></button></td></tr>
                    <%} %>
                	</table>
                	<h5></h5>
                </form>
            </dd>
            -->
        </dl>
        <%} %>
    </div>
    <div class="searchButton" id="searchButton" style="text-align: center;"><%=lang.getFIND_ORDER_LABEL() %></div><br/>
    <a href="/business/"><%=lang.getIS_BUSINESS_LABEL() %></a>
</div>
  <div id="mainContent">
    <div id="home" align="<%=lang.getAlign()%>" dir="<%=lang.getDirection()%>">
                	<p><%=lang.getMAIN_CONTACT_CLIENT_TEXT() %></p>
                </div>
				<div id="join">
                    
                    <center>
                	<div id="stylized" class="myform1">
                    <form id="myform3" method="post" action="createAccountClient" accept-charset="ISO-8859-1">
                    <h1><%=lang.getCLIENT_SIGNUP_LABEL() %></h1>
                    <p></p>

                    <div id="firstForm">
                    <table dir="<%=lang.getDirection()%>">
                    	<tr>
                        	<td align="right">
                            	<label class="reg"><%=lang.getUSERNAME_LABEL() %></label>
                            </td>
                            <td>
                            	<input type="text"  id="clientUserName" name="userName" title="select free user name"/>*
                            </td>
                        </tr>
                        <tr><td></td><td class="status"></td></tr>
                        <tr>
                        	<td align="right">
                            	<label class="reg"><%=lang.getPASSWORD_LABEL() %></label>
                            </td>
                            <td>
                            	<input type="password"  id="password" name="password" title="choose password"/>*
                            </td>
                        </tr>
                        <tr><td></td><td class="status"></td></tr>
                        <tr>
                        	<td align="right">
                            	<label class="reg"><%=lang.getCONFIRM_PASSWORD_LABEL() %></label>
                            </td>
                            <td>
                            	<input type="password" id="password1" name="password1" title="confirm the password"/>*
                            </td>
                        </tr>
                        <tr><td></td><td class="status"></td></tr>
                        <tr>
                        	<td align="right">
                            	<label class="reg"><%=lang.getEMAIL_LABEL()%></label>
                            </td>
                            <td>
                            	<input type="text"  id="email" name="email" title="In this email you will get confirmation about the registration"/>*
                            </td>
                        </tr>
                        <tr><td></td><td class="status"></td></tr>
                        <tr>
                        	<td align="right">
                            	<label class="reg"><%=lang.getPHONE_NUMBER_LABEL() %></label>
                            </td>
                            <td>
                            	<input type="text"  id="phone"  name="phone" title="fiil your phone number"/>*
                            </td>
                        </tr>
                        <tr><td></td><td class="status"></td></tr>
                        <tr><td colspan="2" class="status">
                        <% String validError = (String)session.getAttribute("validErrorClient");
       					   if(validError!=null){
       						   out.print(validError);
       						   session.setAttribute("validErrorClient",null);
       					   }
       					%></td></tr>
                    </table>
                    </div>
                                     
           
                    <button class="formButton" type="submit" id="submitButton" ><%=lang.getSEND_BUTTON() %></button>
                    <div class="spacer"></div>
                    
                    </form>
                </div>
                </center>       
                </div>
                <div id="joinbiz">
                	<center>
                	<div id="stylized" class="myform1">
                    <form id="myform2" enctype="multipart/form-data" method="post" action="createAccountBusiness" accept-charset="ISO-8859-1">
                    <h1>Business Sign-up form</h1>
                    <p>stage 1 of 2</p>

                    <div id="firstForm">
                    <table>
         
                    	<tr>
                        	<td align="right">
                            	<label class="reg">User Name</label>
                            </td>
                            <td>
                            	<input type="text"  id="bizUserName" name="userName" title="select free user name"/>*
                            </td>
                        </tr>
                        <tr><td></td><td class="status"></td></tr>
                        <tr>
                        	<td align="right">
                            	<label class="reg">Password</label>
                            </td>
                            <td>
                            	<input type="password"  id="password" name="password" title="choose password"/>*
                            </td>
                        </tr>
                        <tr><td></td><td class="status"></td></tr>
                        <tr>
                        	<td align="right">
                            	<label class="reg">Confirm Password</label>
                            </td>
                            <td>
                            	<input type="password" id="password1" name="password1" title="confirm the password"/>*
                            </td>
                        </tr>
                        <tr><td></td><td class="status"></td></tr>
                        <tr>
                        	<td align="right">
                            	<label class="reg">Email</label>
                            </td>
                            <td>
                            	<input type="text"  id="email" name="email" title="In this email you will get confirmation about the registration"/>*
                            </td>
                        </tr>
                        <tr><td></td><td class="status"></td></tr>
                        <tr>
                        	<td align="right">
                            	<label class="reg">Business Name</label>
                            </td>
                            <td>
                            	<input type="text"  id="businessName" name="businessName" title="This business name the customer will see"/>*
                            </td>
                        </tr>
                        <tr><td></td><td class="status"></td></tr>
                        <tr>
                        	<td align="right">
                            	<label class="reg">Business Number</label>
                            </td>
                            <td>
                            	<input type="text"  id="businessNumber" name="businessNumber" title="fiil your business number"/>
                            </td>
                        </tr>
                        <tr><td></td><td class="status"></td></tr>
                        <tr>
                        	<td align="right">
                            	<label class="reg">Phone Number</label>
                            </td>
                            <td>
                            	<input type="text"  id="phone"  name="phone" title="fiil your phone number"/>
                            </td>
                        </tr>
                        <tr>
                        	<td align="right">
                            	<label class="reg">Business Logo</label>
                            </td>
                            <td>
                            	<input type="file"  id="bizLogo"  name="bizLogo" title="upload your business logo" accept="image/*"/>
                            </td>
                        </tr>
                        <tr><td></td><td class="status"></td></tr>
                        <tr><td colspan="2" class="status">
                        <% String validError2 = (String)session.getAttribute("validErrorBiz");
       					   if(validError2!=null){
       						   out.print(validError2);
       						   session.setAttribute("validErrorBiz",null);
       					   }
       					   
       					%></td></tr>
                    </table>
                    </div>
                    <div id="secondForm" style="visibility:hidden; position:fixed;">

                        <label>Business Type</label>
                        <select id="bizTypeSelect">
                        	<option id="deflt">Pick a Type</option>
                        	<option id="res" value="0">Restaurant</option>
                        	<option id="del" value="1">Delivery</option>
                        </select>
                        <br></br>
                        <div class="listDiv">
                            <ul id="sortable1"></ul>
                            <input type="text" id="t1" title="You can add,delete or move your Statuses. we bring you suggestion for statuses."/><br><input type="button" onClick="addItem('t1','sortable1');" value="Add"/>
                        </div>
                        <div class="listDiv">
                            <ul id="sortable2"></ul>
                            <input type="text" id="t2" title="You can add,delete or move your Messages we bring you suggestion for statuses."/><br><input type="button" onClick="addItem('t2','sortable2');" value="Add"/>
                        </div>
                        <label>Choose Color</label>
                        <select id="pageColorSelect">
                        	<option id="deflt">Pick main color</option>
                        	<option id="blue" value="0" style="background-color: blue;">Blue</option>
                        	<option id="red" value="1" style="background-color: red;">Red</option>
                        	<option id="green" value="2" style="background-color: green;">Green</option>
                        	<option id="black" value="3" style="background-color: black; color:white;">Black</option>
                        </select><br />
                        <table>
                        	<tr>
                        		<td><span id="pickColor1" class="colorPicker"></span></td>
                        		<td>Background</td>
                        	</tr>
                        	<tr>
                        		<td><span id="pickColor2" class="colorPicker"></span></td>
                        		<td>Second Background</td>
                        	</tr>
                        	<tr>
                        		<td><span id="pickColor3" class="colorPicker"></span></td>
                        		<td>Border</td>
                        	</tr>
                        </table>                                                               
                        <br />
                        <span id="preview">Click to see preview</span>
                        
                    </div>
                   
                    
                    <button class="formButton" type="button" id="prevButton" title="sdad" style="opacity:0.7;">Prev</button>
                    <button class="formButton" type="button" id="nextButton" title="sdad">Next</button>
                    <button class="formButton" type="submit" id="submitButton" >Send</button>
                    
                    <div class="spacer"></div>
                    
                    </form>
                </div>
                </center>
                </div>
                <div id="contactUs">
                	<center>                	
                		<div id="stylized" class="myform1 contactUsForm" style="text-align:<%=lang.getAlign()%>;direction: <%=lang.getDirection()%>;">                		
                			<form action="contactSynca" method="post">
                				<center><h2><%=lang.getCONTACT_US_LABEL() %></h2></center>
                				<p></p>
                				<label><%=lang.getNAME_CONTACT_LABEL()%></label><br/>
                				<input type="text" name="name" /><br/>
                				<label><%=lang.getEMAIL_CONTACT_LABEL() %></label><br/>
                				<input type="text" name="email" /><br/>
                				<label><%=lang.getSUBJECT_CONTACT_LABEL()%></label><br/>
                				<input type="text" name="subject" /><br/>
                				<label><%=lang.getCONTENT_CONTACT_LABEL() %></label><br/>
                				<textarea rows="14" cols="45" name="content"></textarea>
                				<center><button class="formButton" type="submit" value="Send"><%=lang.getSEND_BUTTON() %></button></center>
                			</form>
                		</div>
                	</center>
                </div>
                <div id="forget">
                	<center>
                	<div id="stylized" class="myform1">
                    <form id="myform4" method="post" action="forgetPassword" accept-charset="ISO-8859-1">
                    <h1>Forgot My Password</h1>
                    <p id="title">Customer</p>

                    <div id="firstForm">
                    <table>
         
                    	<tr>
                        	<td align="right">
                            	<label class="reg">User Name</label>
                            </td>
                            <td>
                            	<input type="text"  id="forgetUserName" name="forgetUserName" title="select free user name"/>
                            	<input id="type" name="type" type="hidden" value="Customer"/>
                            </td>
                        </tr>      
                        <tr><td></td><td class="status"><% String forgetError = (String)session.getAttribute("forgetError");
								       					   if(forgetError!=null){
								       						   out.print(forgetError);
								       						   session.setAttribute("forgetError",null);
								       					   }
								       					   
								       					%>
						</td></tr>
                        
                    </table>
                    
                    </div>
                    Your password will be sent to your email acount<br/> 
                    <button class="formButton" type="submit" id="submitButton" >Send</button><br/><br/>
                    <a href="" id="link" onclick="changeForget('Business');return false;">Business? Click Here</a><br/>
                    
                    <div class="spacer"></div>
                    
                    </form>
                </div>
                </center>
                </div>
                <div id="about">
                	<p>this application was builld as a part of  a workshop of google
for third year seniors in bar ilan university.</p>
                </div>

</div>
	<br class="clearfloat" />
	
</div>
<div id="footer">
	<a href="home.jsp?lang=he"><img src="../images/hebrew.gif" width="30px" style="float: left; margin-top: 0.5%; margin-left: 0.5%;"/></a>
	<a href="home.jsp?lang=en"><img src="../images/english.gif" width="30px" style="float: left; margin-top: 0.5%;margin-left: 0.5%;"/></a>
    <p><%=lang.getCOPY_RIGHT_LABEL() %></p>
    
 </div>
</body>
</html>
